document.addEventListener("DOMContentLoaded", function () {

    function createSidebar() {
        const navItems = [
            {
                label: '系统管理',
                icon: 'layui-icon layui-icon-console',
                subItems: [
                    {label: '数据可视化展示', href: '/page/index.html', icon: 'layui-icon layui-icon-chart'},
                    {label: '管理员列表', href: '/page/user.html', icon: 'layui-icon layui-icon-user'},
                    {label: '系统日志管理', href: '/page/log.html', icon: 'layui-icon layui-icon-log'}
                ]
            },
            {
                label: '病人和病房管理',
                icon: 'layui-icon layui-icon-group',
                subItems: [
                    {label: '病人列表', href: '/page/patient.html', icon: 'layui-icon layui-icon-user'},
                    {label: '病房列表', href: '/page/room.html', icon: 'layui-icon layui-icon-home'},
                    {label: '病床列表', href: '/page/bed.html', icon: 'layui-icon layui-icon-component'}
                ]
            },
            {
                label: '员工和部门管理',
                icon: 'layui-icon layui-icon-user',
                subItems: [
                    {label: '员工列表', href: '/page/employee.html', icon: 'layui-icon layui-icon-username'},
                    {label: '部门列表', href: '/page/department.html', icon: 'layui-icon layui-icon-tree'}
                ]
            },
            {
                label: '药品和仪器管理',
                icon: 'layui-icon layui-icon-form',
                subItems: [
                    {label: '药品列表', href: '/page/drug.html', icon: 'layui-icon layui-icon-template'},
                    {label: '仪器列表', href: '/page/instrument.html', icon: 'layui-icon layui-icon-survey'}
                ]
            }
        ];

        const sidebarContainer = document.getElementById('sidebar-container');
        let html = `

            <div class="layui-header" >
                 <div class="layui-logo layui-hide-xs layui-bg-black" style="height: 60px; display: flex; align-items: center;">
                    <span style="font-size: 18px; color: white;margin-left: 8px">SixInOne医院管理系统</span>
                </div>                <!-- 头部区域（可配合layui 已有的水平导航） -->
                <ul class="layui-nav layui-layout-left">
                    <!-- 移动端显示 -->
                    <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                        <i class="layui-icon layui-icon-spread-left"></i>
                    </li>
                    <li class="layui-nav-item layui-hide-xs"><a href="">日志服务系统</a></li>
                    <li class="layui-nav-item layui-hide-xs"><a href="">数据恢复系统</a></li>
                    <li class="layui-nav-item layui-hide-xs"><a href="">分布式系统</a></li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">线路选择</a>
                        <dl class="layui-nav-child">
                            <dd><a href="">线路01</a></dd>
                            <dd><a href="">线路02</a></dd>
                            <dd><a href="">线路03</a></dd>
                        </dl>
                    </li>
                </ul>
                <ul class="layui-nav layui-layout-right">
                    <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                        <a href="javascript:;">
                            <img src="" id="img_top"
                                 class="layui-nav-img">
                            <span id="username_top"></span>
                        </a>
                        <dl class="layui-nav-child">
                            <dd><a href="">个人信息</a></dd>
                            <dd><a href="">设置</a></dd>
                            <dd><a href="">退出</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
            <div class="layui-side layui-bg-black" style="margin-top: 55px">
                <div class="layui-side-scroll">
                    <ul class="layui-nav layui-nav-tree" lay-filter="test">`;

        navItems.forEach(item => {
            html += `
                        <li class="layui-nav-item layui-nav-itemed">
                            <a href="javascript:;">
                                <i class="${item.icon}"></i> <span class="nav-text">${item.label}</span>
                            </a>
                            <dl class="layui-nav-child">`;

            item.subItems.forEach(subItem => {
                html += `
                                <dd>
                                    <a href="${subItem.href}">
                                        <i class="${subItem.icon}"></i> <span class="nav-text">${subItem.label}</span>
                                    </a>
                                </dd>`;
            });

            html += `
                            </dl>
                        </li>`;
        });

        html += `
                    </ul>
                </div>
            </div>`;

        sidebarContainer.innerHTML = html;
    }

    createSidebar();

    var admin = localStorage.getItem("admin")
    admin = JSON.parse(admin)
    $("#username_top").text(admin.username)
    $("#img_top").attr("src", admin.avatar);
    alert(JSON.stringify(admin))
    if (!admin) {
        window.location.href = '/page/login.html';
    }
});
